<template>
  <div class="p-2">
    <div class="border-b-1 border-b-solid border-#e4e4e4 p-b-2">
      <el-button size="small" @click="handlBack">返回</el-button>
    </div>
    <div class="content">
      <el-button type="primary" class="btn">生成包线</el-button>
      <el-tabs v-model="activeData">
        <el-tab-pane v-for="(item, index) in datas" :key="'tab-pane-data' + index" :label="item.label" :name="item.field">
          <el-tabs v-model="activeType" tab-position="left">
            <el-tab-pane v-for="(el, ind) in types" :key="'tab-pane-type' + ind" :label="el.label" :name="el.field">
              <el-table :data="tableDatas" height="200" class="mt-2">
                <el-table-column label="序号" width="55" type="index"></el-table-column>
                <el-table-column prop="taskName" label="任务名称" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column label="机型" width="80" prop="modelType"></el-table-column>
                <el-table-column label="载荷分类" width="100" prop="loadName"></el-table-column>
                <el-table-column label="阶段" width="80" prop="stage"></el-table-column>
                <el-table-column label="载荷版本" width="100" prop="version"></el-table-column>
                <el-table-column label="轮次" width="100" prop="round"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup name="ViewResult" lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
const activeData = ref('first');
const activeType = ref('1');
const datas = ref([
  {
    label: '飞行载荷',
    field: 'first'
  },
  {
    label: '地面载荷',
    field: 'second'
  },
  {
    label: '动载荷',
    field: 'third'
  }
]);
const types = ref([
  {
    label: '机身包线',
    field: '1'
  },
  {
    label: '左机翼包线',
    field: '2'
  },
  {
    label: '右机翼包线',
    field: '3'
  },
  {
    label: '左平尾包线',
    field: '4'
  },
  {
    label: '右平尾包线',
    field: '5'
  },
  {
    label: '垂尾包线',
    field: '6'
  }
]);
const tableDatas = ref([]);
const handlBack = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  padding: 8px;
  .btn {
    position: absolute;
    right: 12px;
  }
}
</style>
